<template>
  <!-- 权限设置 嵌套组件 -->
  <a-collapse
    :default-active-key="[menuItem.key]"
    expandIconPosition="end"
    class="nestedCollapse"
    style="background-color: none"
    :bordered="false"
  >
    <a-collapse-panel
      :key="menuItem.key"
      :header="menuItem.header"
      :showArrow="!!menuItem.children?.length || !!menuItem.btnList?.length"
      :style="
        menuItem.parentId === -1 ? 'margin-bottom: 20px' : 'padding-left: 20px'
      "
    >
      <template #extra>
        <a-checkbox
          v-model:checked="menuItem.checked"
          @change="handleChange(menuItem, $event)"
          @click.stop="handleClick"
          :disabled="menuItem.disabled"
          class="checkBox"
        />
      </template>
      <div
        v-if="
          menuItem.dataPermi &&
          !!menuItem?.dataPermissionList?.length &&
          showDataPermi
        "
        class="btnList"
      >
        数据权限：
        <a-checkbox
          v-for="checkItem in menuItem.dataPermissionList"
          :key="checkItem.name"
          v-model:checked="checkItem.checked"
          @change="handleDataPermissionChange(checkItem, $event)"
          :disabled="checkItem.disabled"
          style="margin-right: 8px"
          >{{ checkItem.name }}</a-checkbox
        >
      </div>
      <!-- 如果有子菜单，则递归渲染 -->
      <div v-if="menuItem.children && menuItem.children.length">
        <NestedCollapse
          v-for="child in menuItem.children"
          :key="child.key"
          :menuItem="child"
          :showDataPermi="showDataPermi"
          @changeAuth="emits('changeAuth', $event)"
        />
      </div>

      <div v-if="menuItem.btnList && menuItem.btnList.length" class="btnList">
        按钮权限：
        <div class="btnBox">
          <a-checkbox
            v-for="checkItem in menuItem.btnList"
            :key="checkItem.name"
            v-model:checked="checkItem.checked"
            @change="handleBtnChange(checkItem, $event)"
            :disabled="checkItem.disabled"
            style="margin-right: 8px"
            >{{ checkItem.name }}</a-checkbox
          >
        </div>
      </div>
    </a-collapse-panel>
  </a-collapse>
</template>
<script setup>
import { Item } from "ant-design-vue/es/menu"
// 
const props = defineProps({
  menuItem: {
    type: Object,
    required: true,
  },
  showDataPermi: {
    type: Boolean,
    default: true,
  },
})
const handleClick = (e) => {
  e.stopPropagation()
}
const emits = defineEmits(["changeAuth"])
const handleChange = (item, val) => {
  const data = {
    ...item,
    checked: val.target.checked,
  }
  emits("changeAuth", data)
}
const handleBtnChange = (item, val) => {
  const data = {
    ...item,
    checked: val.target.checked,
  }
  emits("changeAuth", data)
}
const handleDataPermissionChange = (item, val) => {
  const data = {
    ...item,
    checked: val.target.checked,
  }
  emits("changeAuth", data)
}
</script>
<style scoped lang="less">
.checkBox {
  position: absolute;
  left: 10px;
}
::v-deep(.ant-collapse-header-text) {
  padding-left: 20px;
}
::v-deep(.ant-collapse-content-box) {
  padding: 0 !important;
}
.btnList {
  padding: 12px 15px 12px 33px;
}
.btnBox {
  display: inline-block;
  width: 630px;
  vertical-align: top;
}
</style>
